<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表有序+无序+自定义</title>
</head>

<body>
    <h4>有序列表ol-菜单1</h4>
    <p>特点：独占一行，双标签，li上下无间距，ol上下有默认间距</p>
    <p>标签属性：type(设置列表的默认样式，1/A/a/I/i) start(排序的起始位置，仅支持数字)</p>
    <ol type="A" start="2">
        <li>米饭</li>
        <li>螺蛳粉</li>
        <li>老友粉</li>
        <li>桂林米粉</li>
    </ol>
    <h4>无序列表ul-菜单2，后续使用最多</h4>
    <p>特点：独占一行，双标签，li上下无间距，ul上下有默认间距</p>
    <p>标签属性：type(disc默认值，实心圆 circle空心圆 square实心方块)</p>
    <ul type="circle">
        <li>米饭</li>
        <li>螺蛳粉</li>
        <li>老友粉</li>
        <li>桂林米粉</li>
    </ul>
    <h4>无序ul嵌套ol有序</h4>
    <ul>
        <li>
            <ol>
                <li>无序ul嵌套ol有序1</li>
                <li>米饭</li>
                <li>螺蛳粉</li>
                <li>老友粉</li>
            </ol> <!-- 自定义列表 dl->dt,dd -->
                <!-- 注意:dl中只能包含dt和dd  dt只能有一个 dd可以有多个 -->
                <!-- 特点:dd的内容会向里缩进 -->
                <dl>
                    <dt>购物指南</dt>
                    <dd>购物流程</dd>
                    <dd>会员介绍</dd>
                </dl>
                <dl>
                    <dt>购物指南</dt>
                    <dd>购物流程</dd>
                    <dd>会员介绍</dd>
                </dl>

        </li>
        <li>
            <ol>
                <li>无序ul嵌套ol有序2</li>
                <li>米饭</li>
                <li>螺蛳粉</li>
                <li>老友粉</li>
            </ol>

        </li>
    </ul>
    <h4>ol嵌套ul</h4>
    <ol>
        <li>
            <ul>
                <li>ol嵌套ul1</li>
                <li>米饭</li>
                <li>螺蛳粉</li>
                <li>老友粉</li>
            </ul>
        </li>
        <li>
            <ul>
                <li>ol嵌套ul2</li>
                <li>米饭</li>
                <li>螺蛳粉</li>
                <li>老友粉</li>
            </ul>
        </li>
    </ol>

     <!-- 自定义列表 dl->dt,dd -->
    <!-- 注意:dl中只能包含dt和dd  dt只能有一个 dd可以有多个 -->
    <!-- 特点:dd的内容会向里缩进 -->
    <dl>
        <dt>购物指南</dt>
        <dd>购物流程</dd>
        <dd>会员介绍</dd>
    </dl>
    <dl>
        <dt>购物指南</dt>
        <dd>购物流程</dd>
        <dd>会员介绍</dd>
    </dl>
</body>

</html>